<template>
  <div>
    <div
      id="part-1"
      style="border:1px solid red;height: 30px;width:200px;margin-bottom: 30px;"
    >
      part-1
    </div>
    <div
      id="part-2"
      style="border:2px solid black;height: 100px;;width:200px;margin-top:600px"
    >
      part-2
    </div>
    <div
      id="part-3"
      style="border:2px solid black;height: 100px;;width:200px;margin-top:200px"
    >
      part-3
    </div>
    <div
      id="part-4"
      style="border:2px solid black;height: 500px;;width:200px;margin-top:200px"
    >
      part-4
    </div>
    <div style="position:fixed;top:30px;right:50px">
      <a-anchor
        :items="items"
        :affix="false"
        :target-offset="targetOffset"
      ></a-anchor>
    </div>
  </div>

</template>

<script>
import { h } from 'vue'
export default {
  name: '',
  components: {},
  data() {
    return {
      items: [
        {
          key: 'part-1',
          href: '#part-1',
          title: () => h('span', { style: 'color: red' }, 'Part 1'),
        },
        {
          key: 'part-2',
          href: '#part-2',
          title: 'Part 2',
        },
        {
          key: 'part-3',
          href: '#part-3',
          title: 'Part 3',
        },
      ],
      targetOffset: undefined
    }
  },
  created() { },
  mounted() {
    this.targetOffset = window.innerHeight / 2;
    console.log( this.targetOffset);

  },
  methods: {
    handleClick(e) {
      e.preventDefault();
      console.log(e);
    },
    onChange(e) {
      console.log("onChange", e);
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
